<template>
	<uni-transition class="dialog" @click="close" mode-class="fade" :show="showDialog"> 
		<uni-transition class="actInfo" mode-class="slide-bottom" :show="showDialog" @touchstart="touchstart" @touchend="touchmove">	
			<view class="aInfo">
				<view>
					<image :src="musicInfo.cover" mode="aspectFill"></image>
					
				</view>
				<view>
					<view>{{musicInfo.title}}</view>
					<view>
						<view>
							<cicon v-if="musicInfo.quality==='SQ'" name="sq" :size="42"></cicon> 
							<cicon v-if="musicInfo.quality==='HQ'" name="hq" :size="42"></cicon>  
						</view>
						<view>{{musicInfo.singer+' - '+musicInfo.album}}</view>
					</view>
				</view>
			</view>
			
			<view class="actBox">
				<view @click.stop="songListShow=true">
					<cicon name="addList" :size="32"></cicon> <text>添加到歌单</text>
				</view>
				
				<view @click.stop="addToPlaylist">
					<cicon name="musiclist" :size="32"></cicon> <text>添加到播放队列</text>
				</view>
				
				<view @click.stop="addToNext">
					<cicon name="nextPlay" :size="32"></cicon> <text>下一首播放</text>
				</view>
				
				<!-- <view @click.stop="download">
					<cicon name="download" :size="34"></cicon> <text>下载歌曲</text>
				</view> -->
				
				<view @click.stop="showMusicInfo">
					<cicon name="info" :size="34"></cicon> <text>歌曲信息</text>
				</view>
				<view @click.stop="deleteShow=true">
					<cicon name="delete" :size="36" color="#FF5757"></cicon> <text>永久删除</text>
				</view>
			</view>
			
		</uni-transition>
	
	
		<uni-transition class="bigMusicInfo" mode-class="slide-bottom" :show="showInfo" @touchstart="touchstart" @touchend="touchmove">
			<view class="stitle">
				歌曲信息
			</view>
			<view class="actBox" v-if="showInfo">
				
				<view>
					<view>标题</view>
					<view>{{musicInfo.title}}</view>
				</view>
				<view>
					<view>歌手</view>
					<view>{{musicInfo.singer}}</view>
				</view>
				<view>
					<view>专辑</view>
					<view>{{musicInfo.album}}</view>
				</view>
				<view>
					<view>专辑艺术家</view>
					<view>{{musicInfo.music.additional.song_tag.album_artist}}</view>
				</view>
				<view @click.stop="goLyrics">
					<view>歌词</view>
					<view><text>查看</text>  <cicon name="rightArrow" :size="28"></cicon></view>
				</view>
				 
			</view>
			
			
			<view class="actBox" v-if="showInfo">
				<view>
					<view>文件路径</view>
					<view>{{musicInfo.music.path}}</view>
				</view> 
				<view>
					<view>文件大小</view>
					<view>{{$TOOL.formatSize(musicInfo.music.additional.song_audio.filesize)}}</view>
				</view>  
				<view>
					<view>格式/编码</view>
					<view>{{musicInfo.music.additional.song_audio.container}}/{{musicInfo.music.additional.song_audio.codec}}</view>
				</view> 
				<view>
					<view>时长</view>
					<view>{{$TOOL.secTotime(musicInfo.music.additional.song_audio.duration)}}</view>
				</view>
				<view>
					<view>比特率</view>
					<view>{{musicInfo.music.additional.song_audio.bitrate/1000}} kbps</view>
				</view>
				<view>
					<view>采样率</view>
					<view>{{musicInfo.music.additional.song_audio.frequency}} Hz</view>
				</view>
				<view>
					<view>声道数</view>
					<view>{{musicInfo.music.additional.song_audio.channel}}</view>
				</view>
			</view>
		</uni-transition>
		
		
		<uni-transition class="dialog"  mode-class="fade" :show="deleteShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>删除这首歌曲</view>
				<text>{{musicInfo.title}}</text>
				<view>
					<view @click="showDialog=false;deleteShow=false">取消</view>
					<view @click="deleteMusic">确定</view>
				</view>
			</view>
		</uni-transition>
		
		
		<uni-transition class="dialog"  mode-class="fade" :show="songListShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				 <view>添加到歌单</view>
				 <view class="songListBox">
					 <template v-if="songList && songList.length!=0">
						 <view  @click="addToSonglist(item)" v-for="item in songList">
							 <image :src="item.cover" mode="aspectFill"></image>
							 {{item.name}}
						 </view>
					 </template>
					 <template v-else>
						 <view class="tips">如果没有您的歌单，请尝试<text @click="synSonglist">同步歌单</text>或创建新歌单</view>
					 </template>
				 </view>
				 
				 <view>
				 	<view @click="showDialog=false;songListShow=false">取消</view>
				 	<view @click="addShow=true">新建歌单</view>
				 </view>
			</view>
		</uni-transition>
		
		
		<uni-transition class="dialog" @click="addShow=false" mode-class="fade" :show="addShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>新建歌单</view>
				<input v-model="editName" placeholder="歌单名称 .." />
				<view>
					<view @click="addShow=false">取消</view>
					<view @click="addSave">确定</view>
				</view>
			</view>
		</uni-transition>
		
		
	</uni-transition>
</template>

<script>
	import defaultCover from '@/static/cover.png'
	export default {
		name:"musicInfo",
		data() {
			return {
				musicInfo:[],
				showDialog:false,
				showInfo:false,
				deleteShow:false,
				songListShow:false,
				songList:this.$TOOL.data.get('songList'),
				addShow:false,
				editName:'',
				musicIndex:'',
				startX:0,
				startY:0,
			};
			
		},
		methods:{
			
			touchstart(event) {
			    this.startX = event.changedTouches[0].pageX
			    this.startY = event.changedTouches[0].pageY
			},
			
			touchmove(event) {  
			  
				  var moveEndX = event.changedTouches[0].pageX
				  var moveEndY = event.changedTouches[0].pageY
				  var X = moveEndX - this.startX
				  var Y = moveEndY - this.startY
				  if (Math.abs(X) > Math.abs(Y) && X > 50) {
					 return false
				  } else if (Math.abs(X) > Math.abs(Y) && X < 50) {
					 return false
				  } else if (Math.abs(Y) > Math.abs(X) && Y > 50) {
					 this.close()
				  } else if (Math.abs(Y) > Math.abs(X) && Y < 50) {
					 return false
				  } 
			},
			
			
			
			renderData(data,index){
				this.musicInfo = data
				this.musicIndex = index
				return this
			},
			
			show(){
				this.showDialog = true
				return this
			},
			
			close(){
				this.showDialog = false
				this.showInfo = false
			},
			
			showMusicInfo(){
				this.showInfo = true
			},
			
			goLyrics(){
				this.$TOOL.navTo(`/pages/lyrics/lyrics?id=${this.musicInfo.id}&title=${this.musicInfo.title}&artist=${this.musicInfo.singer}`)
			},
			
			deleteMusic(){
				//删除
				
				this.$API.delete_music.request({
					_sid:this.$TOOL.getSid(),
					accurate_progress:true,
					path:[this.musicInfo.music.path] 
				}).then(()=>{
					this.$TOOL.msg('该歌曲删除成功')
					this.deleteShow=false
					this.showDialog=false
					// #ifdef APP
						this.$parent.musicList.splice(this.musicIndex,1)
					// #endif
					// #ifdef H5
						this.$parent.$parent.musicList.splice(this.musicIndex,1)
					// #endif
				})
				
			},
			
			download(){
				this.$API.download_music.request({
					_sid:this.$TOOL.getSid(),
					songs:this.musicInfo.id,
				}).then((e)=>{
					console.log(e)
				})
				 
			},
			addSave(){
				this.$API.add_playlist.request({
					_sid:this.$TOOL.getSid(),
					name:this.editName,
					library:'personal', 
				}).then(()=>{
					this.addShow = false
					this.synSonglist()
				})
			},
			synSonglist(){
				this.$API.get_playlist.request({
					_sid:this.$TOOL.getSid(),
					library:'personal',
					limit: 1000,
					 
				}).then((e)=>{
					 
					let playList = []
					e.data.playlists.forEach(async (item)=>{
						if(item.id!=='playlist_personal_normal/__SYNO_AUDIO_SHARED_SONGS__'){
							
							let info = await this.$API.get_playlist_info.request({
								_sid:this.$TOOL.getSid(),
								id:item.id,
								library:'personal',
								additional: 'songs_song_tag,songs_song_audio,songs_song_rating,sharing_info'
							})
							 
							item.songs = info.data.playlists[0].additional.songs
							item.songs_total = info.data.playlists[0].additional.songs_total
							//取第一首歌封面作为封面
							item.cover = defaultCover
							if(item.songs_total!=0){
								item.cover = this.$TOOL.data.get('server_url')+this.$API.get_music_cover.url+'&id='+item.songs[0].id
							}
							
							playList.push(item)
						}
					})
					setTimeout(()=>{
						this.songList = playList
						this.$TOOL.data.set('songList',playList)
					},500) 
					
				})
			},
			
			//添加到歌单
			addToSonglist(item){
				let parama = {
					offset: -1,
					limit: 0,
					id: item.id,
					songs: this.musicInfo.id,
				}
				this.$API.updatesongs.request(parama).then((e)=>{
					if(e.success){
						this.$TOOL.msg('添加到歌单成功')
					}else{
						this.$TOOL.msg('当前歌曲已存在歌单')
					}
					this.showDialog=false;
					this.songListShow=false
				})
			},
			
			
			//添加到下一首播放
			addToNext(){
				this.$TOOL.playListManage.add(this.musicInfo,1)
				this.$TOOL.msg('已添加到下一首播放')
				this.showDialog=false;
			},
			
			//添加到播放队列
			addToPlaylist(){
				this.$TOOL.playListManage.add(this.musicInfo)
				this.$TOOL.msg('已添加到播放队列')
				this.showDialog=false;
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	 
	.bigMusicInfo{
		padding: 40rpx;
		background: #F9FAFC; 
		width: calc(100% - 80rpx);
		height:calc(100vh - 220rpx) ;
		overflow-y: auto; 
		position: absolute; 
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		.stitle{
			font-weight: 900;
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 40rpx;
		}
		.actBox{
			background: #ffffff;
			padding: 30rpx 40rpx;
			border-radius: 20rpx;
			margin-top:20rpx;
			font-size: 28rpx;
			color: #333333;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
				&:last-child{
					margin-bottom: 0;
				}
				>view{
					&:first-child{
						margin-right: 40rpx;
						min-width: 120rpx;
					}
					&:last-child{
						opacity: 0.6;
						text-align: right;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						>text{
							margin-right: 8rpx;
							position: relative;
							top: -2rpx;
						}
					}
				}
			}
		}
	}

	.songListBox{
		max-height: 500rpx;
		overflow-y: auto;
		view{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			margin-bottom: 20rpx;
			
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: block;
				margin-right: 30rpx;
			}
		}
		.tips{
			margin: 20rpx 0;
			font-size: 24rpx;
			opacity: 0.7;
			display: unset;
			text{
				display: inline;
				color:$uni-color-primary;
				font-size: 24rpx;
			}
		}
	}
</style>